import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import { registerMicroApps, start } from 'qiankun';

Vue.config.productionTip = false;

class Event {
  constructor() {
    this.callbacks = [];
  }
  on(cb) {
    this.callbacks.push(cb);
  }
  emit(callBackFnHandler) {
    if (typeof callBackFnHandler === 'function') {
      callBackFnHandler(this.callbacks);
    } else {
      this.callbacks.forEach((fn) => fn());
    }
    this.callbacks = [];
  }
}
let e = new Event();
window.$bus = e;

const microApps = [
  {
    name: 'vue2',
    entry: '//localhost:9910',
    activeRule: '/qkvue2',
    container: '#vue',
    props: { data: { store, router } },
  },
  {
    name: 'vue3',
    entry: '//localhost:9920',
    activeRule: '/qkvue3',
    container: '#vue',
    props: { data: { store, router } },
  },
  {
    name: 'react17',
    entry: '//localhost:7100',
    activeRule: '/react17',
    container: '#vue',
    props: {
      routerBase: '/sub-vue',
    },
  },
  {
    name: 'angular9',
    entry: '//localhost:7103',
    activeRule: '/angular9',
    container: '#vue',
    props: {},
  },
  {
    name: 'jcpgyj',
    entry: '//localhost:7104',
    activeRule: '/jcpgyj',
    container: '#vue',
    props: {
      data: { store, router },
      top: window,
    },
  },
  {
    name: 'zygjczlyj',
    entry: '//localhost:7105',
    activeRule: '/zygjczlyj',
    container: '#vue',
    props: {
      data: { store, router },
      top: window,
    },
  },
];

const config = {
  // 挂载前回调
  beforeLoad: [
    (app) => {
      console.log(
        '%c before load挂载前回调',
        'background:#0f0; padding: 1px; border-radius: 3px;  color: #fff',
        app
      );
      if (app.name === 'html5') {
        console.log('挂载前回调html5');
      }
    },
  ],
  // 挂载后回调
  beforeMount: [
    (app) => {
      console.log(
        '%c before mount挂载后回调',
        'background:#f1f; padding: 1px; border-radius: 3px;  color: #fff',
        app
      );
      if (app.name === 'html5') {
        console.log('挂载后回调html5');
      }
    },
  ],
  // 卸载后回调
  afterUnmount: [
    (app) => {
      if (app.name === 'html5') {
        console.log('卸载后回调html5');
      }
      console.log(
        '%c after unload卸载后回调',
        'background:#a7a; padding: 1px; border-radius: 3px;  color: #fff',
        app
      );
    },
  ],
};

registerMicroApps(microApps, config);
start({
  prefetch: 'all', // 预加载
});

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount('#app');
